import { Modal, Button } from "antd"
import React, { Component } from "react"

import { inject, observer } from "mobx-react"
import styles from "./index.less"
import classnames from "classnames"
import IconFont from "component/IconFont"

@inject("ScreenStore")
@observer
class SceneModal extends React.Component {
  constructor(props) {
    super(props)

    this.store = this.props.ScreenStore
  }

  onCancle = () => {
    const { cancle } = this.store
    const { onCancle } = this.props
    onCancle ? onCancle(cancle) : cancle()
  }

  render() {
    const { modalVisible } = this.store
    const { type, className } = this.props

    return (
      <Modal
        title={""}
        visible={this.store.visible[type] || false}
        footer={null}
        getContainer={() => {
          return document.getElementById("wyw_cl_screen") || false
        }}
        mask={false}
        destroyOnClose={true}
        wrapClassName={classnames(styles["modal"], className)}
        onCancel={this.onCancle}
      >
        <div className={styles["modal-bg"]}>
          <div className={styles["modal-bg-top"]} />
          <div className={styles["modal-bg-middle"]} />
          <div className={styles["modal-bg-bottom"]} />
        </div>
        <div className={styles["modal-header"]}>
          <div className={styles["modal-header-rail"]} />

          <span className={styles["modal-title"]}>
            {this.props.title || ""}
          </span>
          <span className={styles["modal-close"]} onClick={this.onCancle}>
            {/* <IconFont type="iconguanbi" className={styles['item-icon']} /> */}
            {/* <span>关闭</span> */}
          </span>
        </div>
        <div className={styles["modal-content"]}>
          <div className={styles["overflow-auto"]}>{this.props.children}</div>
        </div>
      </Modal>
    )
  }
}
export default SceneModal
